<template>
  <div class="container">
    <div class="search-box">
      <el-button
        type="danger"
        size="small"
        @click="handleMultipleDelete()"
      >批量删除</el-button>
      <span class="margin-left-m">员工:</span>
      <el-input
        v-model="searchForm.operator"
        placeholder="请输入搜索的员工编号"
        style="width: 200px"
        class="margin-left-m"
        size="small"
      />
      <span class="margin-left-m">日期类型:</span>
      <el-select
        v-model="searchForm.TimeType"
        size="small"
        style="width: 130px"
        class="margin-left-m"
        @change="handleSelectType()"
      >
        <el-option label="不限" :value="0" />
        <el-option label="按年" :value="1" />
        <el-option label="按月" :value="2" />
        <el-option label="按日" :value="3" />
      </el-select>
      <span
        v-show="searchForm.TimeType !== 0"
        class="margin-left-m"
      >{{ tip }}:</span>
      <el-date-picker
        v-show="searchForm.TimeType !== 0"
        v-model="searchForm.createtime"
        class="margin-left-m"
        :type="
          searchForm.TimeType === 1
            ? 'year'
            : searchForm.TimeType === 2
              ? 'month'
              : 'date'
        "
        :value-format="
          searchForm.TimeType === 1
            ? 'yyyy'
            : searchForm.TimeType === 2
              ? 'yyyy-MM'
              : 'yyyy-MM-dd'
        "
        :placeholder="tip"
        :picker-options="{ disabledDate: dateOptions }"
        style="margin-left: 10px; width: 180px"
        size="small"
      />
      <el-button
        class="margin-left-m"
        type="primary"
        size="small"
        @click="getAllLogList()"
      >检索</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%; margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="55" />
      <el-table-column prop="content" label="员工操作内容" width="600" />
      <!-- <el-table-column prop="auditUser" label="审查人" /> -->
      <el-table-column prop="createtime" label="操作时间" align="center" />
      <el-table-column label="操作" width="300" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            plain
            @click="handleDelete(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        :current-page.sync="searchForm.pageNum"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="searchForm.pageSize"
        layout="sizes, total, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import { getAllLog, DeleteByRecIds } from '../../api/log'
export default {
  data() {
    return {
      searchForm: {
        pageNum: 1,
        pageSize: 10,
        operator: '',
        createtime: '',
        TimeType: 0
      },
      tip: '',
      total: 0,
      tableData: [],
      multipleSelect: []
    }
  },
  created() {
    this.getAllLogList()
  },
  methods: {
    dateOptions(time) {
      return time.getTime() > Date.now() - 8.64e6
    },
    getAllLogList() {
      if (this.searchForm.TimeType !== 0 && this.searchForm.createtime === '') {
        this.$message.warning('请' + this.tip)
        return
      }
      getAllLog(this.searchForm).then((res) => {
        this.total = res.list.total
        this.tableData = res.list.records
      })
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelect = []
      val.forEach(item => {
        this.multipleSelect.push(item.recId)
      })
    },
    // 点击批量删除
    handleMultipleDelete() {
      this.deleteByRecIds({
        recIds: this.multipleSelect
      })
    },
    // 点击删除
    handleDelete(row) {
      this.deleteByRecIds({
        recIds: [row.recId]
      })
    },
    deleteByRecIds(data) {
      console.log(data)
      DeleteByRecIds(data).then((res) => {
        this.$message.success('删除成功')
        this.getAllLogList()
      })
    },
    // 点击选择日期类型
    handleSelectType() {
      switch (this.searchForm.TimeType) {
        case 0:
          this.tip = ''
          break
        case 1:
          this.tip = '选择年度'
          break
        case 2:
          this.tip = '选择月份'
          break
        case 3:
          this.tip = '选择日期'
          break
        default:
          break
      }
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      this.getAllLogList()
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      this.getAllLogList()
    }

  }
}
</script>

<style scoped>
.container {
  padding: 15px;
}
.search-box {
  display: flex;
  align-items: center;
  color: rgb(96, 98, 102);
  font-size: 15px;
}
.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
.danger {
  color: #f56c6c;
}
.primary {
  color: #409eff;
}
.success {
  color: #67c23a;
}
.warning {
  color: #e6a23c;
}
.info {
  color: #909399;
}
.margin-left-m {
  margin-left: 10px;
}
</style>
